<template>
  <view>
    <u-navbar title="我的简历" title-size="36" :border-bottom="false"></u-navbar>
    <view class="form">
      <view class="item dis-flex flex-y-between flex-y-center">
        <!-- <view class="" style="font-size: 28rpx;">头像</view> -->
        <view class="u-info">
          <view class="u-info-t dis-flex">
            <input
              placeholder="请输入姓名"
              maxlength="10"
              class="input label"
              v-model="userInfo.nickname"
            />
            <u-icon name="/static/tjxgsj.png" size="36"></u-icon>
          </view>
          <view class="u-info-b dis-flex">
            <text class="text">3年工作经验 </text>
            <text class="text"> · </text>
            <text class="text">28岁 </text>
            <text class="text"> · </text>
            <text class="text">本科</text>
          </view>
        </view>
        <view class="value">
          <u-avatar size="120" :src="userInfo.avatar"></u-avatar>
        </view>
      </view>

      <view class="item">
        <view class="label">求职状态</view>
        <view
          @click="onPicker('selector', 'status')"
          class="value dis-flex flex-y-between flex-y-center"
        >
          <input placeholder="请选择状态" disabled v-model="userInfo.edu" />
          <u-icon name="/static/more.png" size="26"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-between flex-y-center">
        <view class="label">个人优势</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <!-- <input placeholder="请输入个人优势" class="input" v-model="userInfo.phone"/> -->
          <u-icon name="/static/tjxgsj.png" size="36"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-between flex-y-center" @click="showEditor('yx')">
        <view class="label">求职意向</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <view v-if="form.yixiang">已填写</view>
          <u-icon name="/static/add.png" size="36" style="margin-left: 10rpx"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-between flex-y-center" @click="onPicker('time')">
        <view class="label">参加工作时间</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <u-icon name="/static/more.png" size="26"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-between flex-y-center">
        <view class="label">项目经历</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <u-icon name="/static/add.png" size="36"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-between flex-y-center">
        <view class="label">教育经历</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <u-icon name="/static/add.png" size="36"></u-icon>
        </view>
      </view>
      <view class="item dis-flex flex-y-between flex-y-center" @click="showEditor('zs')">
        <view class="label">技能证书</view>
        <view class="value dis-flex flex-y-between flex-y-center">
          <u-icon name="/static/add.png" size="36"></u-icon>
        </view>
      </view>
    </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      :params="params"
      :range-key="rangeKey"
    ></u-picker>
    <Meditor
      :title="editorTitle"
      @submit="submitEditor"
      @closeEditor="closeEditor"
      :content="content"
      v-if="showEditorModel"
    ></Meditor>
    <view class="fixed-wapper">
      <view class="submit-btn" @click="">预览简历</view>
    </view>
  </view>
</template>

<script>
import Meditor from '@/users/components/editor/editor.vue'
export default {
  components: {
    Meditor
  },
  data() {
    return {
      rangeKey: '',
      range: [],
      mode: 'selector',
      regionGenderList: [
        {
          gender: '男',
          value: '男'
        },
        {
          gender: '女',
          value: '女'
        }
      ],
      statusList: [
        {
          status: '离职',
          value: '离职'
        },
        {
          status: '在职',
          value: '在职'
        }
      ],
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
        province: true,
        city: true,
        area: true,
        timestamp: true
      },
      show: false,
      userInfo: {
        nickname: '幕刃',
        avatar: '',
        gender: '男',
        birthday: '1999-09',
        address: '',
        edu: ''
      },
      editorTitle: '',
      form: {
        zhengshu: '',
        yixiang: ''
      },
      content: '',
      showEditorModel: false
    }
  },
  methods: {
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    showEditor(type) {
      const app = this
      if (type == 'zs') {
        app.editorTitle = '技能证书'
        app.content = app.form.zhengshu
      }
      if (type == 'yx') {
        app.editorTitle = '求职意向'
        app.content = app.form.yixiang
      }
      app.showEditorModel = true
    },
    closeEditor() {
      const app = this
      app.showEditorModel = false
    },
    submitEditor(res) {
      const app = this
      if (app.editorTitle == '求职意向') {
        app.form.yixiang = res
      }
      app.showEditorModel = false
    },
    onPicker(e, f) {
      this.mode = e
      if (f == 'status') {
        this.rangeKey = 'status'
        this.range = this.statusList
      }
      console.log('onPicker', e)
      this.show = true
    },
    confirmSelctor(e) {
      if (this.mode == 'selector') {
        if (this.rangeKey == 'status') {
          this.userInfo.gender = this.range[e].value
        }
      } else if (this.mode == 'time') {
        this.userInfo.birthday = e.year + '-' + e.month
      } else {
        this.userInfo.address = e.province.label + e.city.label + e.area.label
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/btn.css';
.form {
  .item {
    padding: 36rpx 30rpx 36rpx 30rpx;
    border-bottom: 1rpx solid #dfe0e6;

    .label {
      font-weight: 600;
      font-size: 30rpx;
      color: #333333;
    }

    .value {
      input {
        font-size: 28rpx;
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
}
.input {
  max-width: 160rpx;
}
.u-info {
  .u-info-t {
    margin-bottom: 20rpx;
  }
  .u-info-b {
    font-size: 28rpx;
    color: #999999;
    .text {
      margin-right: 10rpx;
    }
  }
}
</style>
